<template>
	<div class="main-con">
		<div class="searches-wrapper">
			<el-form class="queryForm" :model="queryFormData" ref="queryForm" label-width="80px" :inline="true" size="small" label-suffix=": ">
				<el-form-item prop="assetModel" label="资产型号">
					<el-input v-model="queryFormData.assetModel" style="width: 180px" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item prop="assetType" label="资产类型">
					<el-select v-model="queryFormData.assetType" placeholder="请选择" style="width: 180px" clearable filterable>
						<el-option v-for="item in assetType" :key="item.resourceTypeId" :label="item.name" :value="item.resourceTypeId"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="state" label="资产状态">
					<el-select v-model="queryFormData.state" placeholder="请选择" style="width: 180px" clearable filterable>
						<el-option v-for="item in stateOpt" :key="item.code" :label="item.name" :value="item.code"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="showQueryItem" prop="assetPlace" label="存放位置">
					<el-select v-model="queryFormData.assetPlace" placeholder="请选择" style="width: 180px" clearable filterable>
						<el-option v-for="item in assetLocation" :key="item.oid" :label="item.name" :value="item.oid"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="showQueryItem" prop="proName" label="所属项目">
					<el-input v-model="queryFormData.proName" placeholder="请输入" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item v-if="showQueryItem" prop="assetNum" label="资产编号">
					<el-input v-model="queryFormData.assetNum" placeholder="请输入" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item class="form-item-btn">
					<el-button type="default" @click="resetQueryForm">重置</el-button>
					<el-button type="primary" @click="loadData">查询</el-button>
					<el-button type="text" @click="showMore">{{ formBtnText }} <i class="el-icon-arrow-down"></i></el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="card-table">
			<div class="card-title">
				<div class="title-con">
					资产列表
				</div>
				<div>
					<el-button icon="icongonggong_tianjia_16" round type="default" size="small" @click="filterColumeHandler()"> 过滤项</el-button>
					<el-button v-hasPerm="['change']" type="default" size="small" @click="changeGroup">变更</el-button>
					<el-button v-hasPerm="['down']" type="default" size="small" @click="outAssetGroup">下架</el-button>
					<el-button v-hasPerm="['put']" type="default" size="small" @click="putAssetGroup">上架</el-button>
					<el-button v-hasPerm="['export']" type="primary" size="small" @click="exportData">导出</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" class="systemTable" :data="dataSource" v-loading="loading" stripe :height="tableHeight" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="assetNum" label="资产编号" width="150" show-overflow-tooltip>
					<template v-slot="{ row }">
						<span style="color: #0096FF;">{{ row.assetNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="assetTypeName" label="资产类型" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="assetModel" label="资产型号" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="assetPlaceName" label="存放位置" show-overflow-tooltip width="110"></el-table-column>
				<el-table-column prop="state" label="状态" width="95">
					<template v-slot="{ row }">
						<span :class="`stateColor${row.state}`">
							●
						</span>
						{{ row.stateName }}
					</template>
				</el-table-column>
				<el-table-column prop="assetSerialNum" label="资产序列号" show-overflow-tooltip min-width="150"></el-table-column>
				<el-table-column prop="proName" label="所属项目" min-width="110"></el-table-column>
				<el-table-column prop="proLeaderName" label="项目负责人" width="100"></el-table-column>
				<el-table-column prop="createUserName" label="登记人" width="90"></el-table-column>
				<el-table-column prop="createTime" label="登记时间" width="110">
					<template v-slot="{ row }">
						{{ dateFormat(row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200" fixed="right">
					<template v-slot="{ row }">
						<el-button v-if="rowBtnHasPerm(['QRCODE'], row.state != '5')" class="text-btn-table" type="text" v-print="`printStyle`" @click="showQRCode(row)">二维码</el-button>
						<!-- <el-button v-if="rowBtnHasPerm(['QRCODE'], row.state != '5')" class="text-btn-table" type="text" v-print="`#pc-${row.hisId}`" @click="showQRCode(row)">二维码</el-button> -->
						<el-button v-if="rowBtnHasPerm(['put'], row.state == '0')" class="text-btn-table" type="text" @click="putAsset(row)">上架</el-button>
						<el-button v-if="rowBtnHasPerm(['scrap'], ['0', '2'].includes(row.state))" class="text-btn-table" type="text" @click="scrapAsset(row)">报废</el-button>
						<!-- <el-button v-if="row.state == '1'" class="text-btn-table" type="text" @click="cancelPutAsset(row)">取消上架</el-button>
						<el-button v-if="row.state == '4'" class="text-btn-table" type="text" @click="cancelOutAsset(row)">取消下架</el-button> -->
						<el-button v-if="rowBtnHasPerm(['info'])" class="text-btn-table" type="text" @click="showDataInfo(row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="systemPagination"
				:current-page="pageParams.currentPage"
				:page-sizes="pageParams.pageSizes"
				:page-size="pageParams.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageParams.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
		<div style="display:none">
			<div ref="print" id="printStyle">
				<asset-print :asset="printAsset" printType="asset" />
			</div>
		</div>
	</div>
</template>
<script>
	import singleTableMixin from '@/mixins/singleTableMixin'
	import assetApi from '@/api/assetApi'
	import { getAction, postAction } from '@/utils/httpUtil'
	import { mapGetters } from 'vuex'
	import AssetPrint from './models/AssetPrint'
	export default {
		name: 'assetQuery',
		components: {
			AssetPrint,
		},
		mixins: [singleTableMixin],
		data() {
			return {
				apiUrl: {
					list: assetApi.asset.list,
				},
				stateOpt: [
					{ code: '0', name: '在库' },
					{ code: '1', name: '预上架' },
					{ code: '2', name: '在架' },
					{ code: '3', name: '下架' },
					{ code: '4', name: '预下架' },
					{ code: '5', name: '已报废' },
				],
				assetType: [],
				assetLocation: [],
				printAsset: {},
				showPrint: false,
			}
		},
		computed: {
			...mapGetters(['permission_routes']),
		},
		mounted() {
			this.getTableHeight()
			// window.onresize = () => {
			//   return (() => {
			//     this.tableHeight = window.innerHeight - 100
			//   })()
			// }
			// 资产类型
			// selectDictItems({ code: 'assetType' }).then(res => {
			// 	this.assetType = res.info
			// })
			// // 资产位置
			// selectDictItems({ code: 'assetPlace' }).then(res => {
			// 	this.assetLocation = res.info
			// })
			// this.commonLoadDic('资产类型', 'assetType')
			this.selectAssetType()
			this.commonLoadDic('资产位置', 'assetLocation')
		},
		methods: {
			getTableHeight() {
				let contentHeight = document.getElementsByClassName('main-con')[0].offsetHeight
				let searchesHeight = document.getElementsByClassName('searches-wrapper')[0].offsetHeight
				this.$nextTick(() => {
					this.tableHeight = contentHeight - searchesHeight - 130
				})
			},
			selectAssetType() {
				getAction(assetApi.asset.selectAssetType).then(res => {
					this.assetType = res.info
				})
			},
			commonLoadDic(type, objStr) {
				getAction(assetApi.asset.queryByCode, { name: type }).then(res => {
					this[objStr] = res.info
				})
			},
			filterColumeHandler() {},
			/**
			 * 二维码
			 * @param {} row
			 */
			showQRCode(row) {
				this.printAsset = row
			},
			/**
			 * 上架
			 * @param {*} row
			 */
			putAsset(row) {
				// "/asset/assetPutawayList"
				const route = this.getWfIdFromRoute('/asset/assetPutawayList')
				this.$router.push(`/assetPutawayAdd/${route.meta.wfClassId}?assetIds=${row.id}`)
			},
			/**
			 * 取消上架
			 * @param {*} row
			 */
			cancelPutAsset(row) {},
			/**
			 * 取消下架
			 * @param {*} row
			 */
			cancelOutAsset(row) {},
			/**
			 * 详情
			 * @param {*} row
			 */
			showDataInfo(row) {
				this.$router.push(`/assetInfo/${row.id}`)
			},
			/**
			 * 报废
			 * @param {*} row
			 */
			scrapAsset(row) {
				// "/asset/assetScrapList"
				const route = this.getWfIdFromRoute('/asset/assetScrapList')
				this.$router.push(`/assetScrapAdd/${route.meta.wfClassId}?assetIds=${row.id}`)
			},
			/**
			 * 批量上架
			 */
			putAssetGroup() {
				let idList = []
				if (this.multipleSelection && this.multipleSelection.length > 0) {
					this.multipleSelection.forEach(el => {
						if (el.state == '0') {
							idList.push(el.id)
						}
					})
				}
				if (idList.length == 0) {
					this.$message.warning('请选择在库资产')
					return
				}
				const route = this.getWfIdFromRoute('/asset/assetPutawayList')
				this.$router.push(`/assetPutawayAdd/${route.meta.wfClassId}?assetIds=${idList.join(',')}`)
			},
			/**
			 * 批量下架
			 */
			outAssetGroup() {
				// "/asset/outList"
				let idList = []
				if (this.multipleSelection && this.multipleSelection.length > 0) {
					this.multipleSelection.forEach(el => {
						if (el.state == '2') {
							idList.push(el.id)
						}
					})
				}
				if (idList.length == 0) {
					this.$message.warning('请选择在架资产')
					return
				}
				const route = this.getWfIdFromRoute('/asset/outList')
				this.$router.push(`/assetOutAdd/${route.meta.wfClassId}?assetIds=${idList.join(',')}`)
			},
			/**
			 * 批量变更
			 */
			changeGroup() {
				let idList = []
				if (this.multipleSelection && this.multipleSelection.length > 0) {
					this.multipleSelection.forEach(el => {
						if (el.state == '2') {
							idList.push(el.id)
						}
					})
				}
				if (idList.length == 0) {
					this.$message.warning('请选择在架资产')
					return
				}
				const route = this.getWfIdFromRoute('/asset/assetChangeList')
				this.$router.push(`/assetChangeAdd/${route.meta.wfClassId}?assetIds=${idList.join(',')}`)
				// if (this.multipleSelection && this.multipleSelection.length > 0) {
				// 	let idList = []
				// 	this.multipleSelection.forEach(el => {
				// 		idList.push(el.id)
				// 	})
				// 	const route = this.getWfIdFromRoute('/asset/assetChangeList')
				// 	this.$router.push(`/assetChangeAdd/${route.meta.wfClassId}?assetIds=${idList.join(',')}`)
				// } else {
				// 	this.$message.warning('未选择资产数据')
				// }
			},
			/**
			 * 导出资产
			 */
			exportData() {
				let idList = []
				if (this.multipleSelection && this.multipleSelection.length > 0) {
					this.multipleSelection.forEach(el => {
						idList.push(el.id)
					})
				}
				if (idList.length == 0) {
					this.$message.warning('请选择需要导出的资产数据')
					return
				}
				window.open(`${assetApi.asset.exportData}${idList.join(',')}`, '_blank')
			},
			getWfIdFromRoute(path) {
				let route
				for (let i = 0; i < this.permission_routes.length; i++) {
					let children = this.permission_routes[i].children
					if (children && children.length > 0) {
						route = children.find(item => {
							return item.path == path
						})
					}
					if (route) {
						return route
					}
				}
			},
		},
	}
</script>
<style lang="scss" scoped>
	.searches-wrapper {
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		padding: 8px;
	}

	.card-table {
		background: #ffffff;
		padding: 15px 10px;
		margin-top: 10px;
		border-radius: 6px;
	}

	.form-item-btn {
		position: absolute;
		right: 15px;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
		height: 30px;
		align-items: center;

		.title-con {
			height: 22px;
			padding-left: 10px;
			border-left: 4px solid rgba(33, 183, 149, 1);
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.stateColor0 {
		color: #f59a23;
	}

	.stateColor1 {
		color: #02a7f0;
	}

	.stateColor2 {
		color: #039d12;
	}

	.stateColor3 {
		color: #d9001b;
	}

	.stateColor4 {
		color: #a577fd;
	}

	.stateColor5 {
		color: #b4b4b4;
	}
</style>
